<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>ECharts 折线图数据切换示例</title>  
    <script src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>
</head>  
<body>  
    <div id="chart" style="width: 100%;height:100vh"></div>  
  
    <script>  
        var myChart = echarts.init(document.getElementById('chart'));  
  
        var dayData = [
            '1', '1', '1', '1', '2', // 2022-12
            '1', '2', '1', '2', '1', '1', '1', // 2023-1
            '1', '1', '1', '2', '1', '1', // 2023-2
            '1', '1', '1', '2', '1', '1', '1', '1', '3', // 2023-3
            '1', '1', '2', '1', '2', '1', // 2023-4
            '1', '1', '2', '2', // 2023-5
            '1', '1', '1', '1', '1', '1', '5', // 2023-6
            '3', '1', '4', '3', '2', // 2023-7
            '2', '3', // 2023-8
            '2', '3', '1', // 2023-9
            '3', '2', '1', '1', '1', // 2023-10
            '2', '1', '2', '2', '1', // 2023-11
            '3', '1', '3', '2', '1', '3', '3', // 2023-12
            '1', '1', '1', '1', '2', '1', '1', '1', // 2024-1
            '1', '1', '1', '1', '3', '1', '1', '2', // 2024-2
            '1', '4', '2', '3', '2', // 2024-3
            '2', '1', '1', '2', // 2024-4
            '2', '1', '1', '2', '1', '1', // 2024-5
            '1' // 2024-6
        ];  
        var dayDataX = [
            '2022-12-14', '2022-12-16', '2022-12-20', '2022-12-27', '2022-12-31',
            '2023-1-2', '2023-1-7', '2023-1-11', '2023-1-14', '2023-1-21', '2023-1-23', '2023-1-28',
            '2023-2-2', '2023-2-4', '2023-2-12', '2023-2-17', '2023-2-19', '2023-2-23',
            '2023-3-2', '2023-3-5', '2023-3-8', '2023-3-12', '2023-3-19', '2023-3-23', '2023-3-26', '2023-3-29', '2023-3-30/31',
            '2023-4-2', '2023-4-5', '2023-4-12/13', '2023-4-18', '2023-4-21/22', '2023-4-24',
            '2023-5-9', '2023-5-13', '2023-5-19/20', '2023-5-26/27',
            '2023-6-3', '2023-6-5', '2023-6-7', '2023-6-9', '2023-6-14', '2023-6-18', '2023-6-22/23',
            '2023-7-1/2', '2023-7-8', '2023-7-15/16', '2023-7-22/23', '2023-7-28',
            '2023-8-12/13', '2023-8-26/27',
            '2023-9-16/17', '2023-9-23/24', '2023-9-29',
            '2023-10-3/6', '2023-10-14/15', '2023-10-22', '2023-10-28', '2023-10-31',
            '2023-11-4/5', '2023-10-11/12', '2023-11-18/19', '2023-11-24', '2023-11-26',
            '2023-12-2/3', '2023-12-8', '2023-11-9/10', '2023-12-6', '2023-12-21', '2023-12-23/24', '2023-12-30/31',
            '2024-1-10', '2024-1-12', '2024-1-16', '2024-1-18', '2024-1-20/21', '2024-1-24', '2024-1-27', '2024-1-30',
            '2024-2-1', '2024-2-3', '2024-2-6', '2024-2-8', '2024-2-13/15', '2024-2-18', '2024-2-20', '2024-2-24/25',
            '2024-3-5', '2024-2-9/10', '2024-3-15/16', '2024-3-23/24', '2024-2-28/29',
            '2024-4-5/6', '2024-4-13', '2024-4-16', '2024-4-20/21',
            '2024-5-4/5', '2024-5-11', '2024-5-15', '2024-5-18/19', '2024-5-30', '2024-5-31',
            '2024-6-1'
        ]

        var monthDataX = [
            '2022-12', 
            '2023-1', '2023-2','2023-3', '2023-4', '2023-5', '2023-6', '2023-7', '2023-8', '2023-9', '2023-10', '2023-11', '2023-12', 
            '2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6'
        ]
        var monthData = [
            '6', 
            '9', '7', '12', '8', '6', '11', '13', '5', '6', '8', '8', '16', 
            '9', '11', '12', '6', '8', '1'
        ]
        var pcData = [
            '0', 
            '1', '0', '2', '1', '2', '1', '0', '0', '0', '0', '1', '0',
            '0', '0', '0', '1', '0', '0'
        ]
        var mkData = [
            '0', 
            '0', '0', '0', '0', '0', '5', '13', '5', '5', '6', '5', '11', 
            '3', '6', '6', '4', '5', '1'
        ]
        const colors = ['#5470C6', '#EE6666'];
            var option = {
                legend: {},  
                tooltip: {
                    trigger: 'none',
                    axisPointer: {
                    type: 'cross'
                    }
                },
                xAxis: [
                    {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                        color: colors[1]
                        }
                    },
                    // axisPointer: {
                    //     label: {
                    //     formatter: function (params) {
                    //         console.log(params)
                    //         return 
                    //         (
                    //        params.seriesData[0].seriesName +
                    //         params.value +
                    //         (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                    //         );
                    //     }
                    //     }
                    // },
                    data: dayDataX
                    },
                    {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                        color: colors[0]
                        }
                    },
                    axisPointer: {
                        label: {
                        formatter: function (params) {
                            console.log(params)
                            let str = ''
                            params.seriesData.forEach(item => {
                                str += `${item.seriesName}: ${item.value} /`
                            })
                            return str
                        }
                        }
                    },
                    // prettier-ignore
                    data: monthDataX
                    }
                ],
                yAxis: {
                    type: 'value'
                },
                series: [
                {
                    name: '月总数据',
                    type: 'line',
                    xAxisIndex: 1,
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    data: monthData
                    },
                    {
                    name: '月总pc数据',
                    type: 'line',
                    xAxisIndex: 1,
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    data: pcData
                    },
                    {
                    name: '月总mk数据',
                    type: 'line',
                    xAxisIndex: 1,
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    data: mkData
                    },
                    {
                    name: '日数据',
                    type: 'line',
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    data: dayData
                    }
                ]  
            };  
  
            myChart.setOption(option);  
          
  
    </script>  
</body>  
</html>